<template>
    <div class="Login">
        <div class="T">
          <svg class="icon" aria-hidden="true" @click="goto('adminlogin')">
            <use xlink:href="#icon-guanliyuan"></use>
          </svg>
            <h1>物易近——跑腿员登录</h1>
        </div>
        <div class="A">
            <span class="e"><router-link to="/"><strong>用户登录 |</strong></router-link></span>
            <span class="p"><router-link to="/workerlogin"><strong>跑腿员登录</strong></router-link></span>
            <form :v-model="worker">
            <div class="a">
                <span>用户名</span>
                <input type="text"  placeholder="请输入用户名" v-model="worker.workername"><br>
            </div>
            <div class="b">
                <span>密码</span>
                <input type="password"  placeholder="请输入密码" v-model="worker.password"><br>
            </div>
            <div class="f">
                <div class="c">
                    <input type="submit" value="登录" @click="login()">
                </div>
    
                <button class="d"><router-link to="/wregister"><span>注册</span></router-link></button>

            </div>
            <a class="floatR" @click="isChangePassword = true">忘记密码？点击此处找回密码</a>
            
        </form>
        </div>
<!-- 忘记密码弹窗 -->
<el-dialog v-model="isChangePassword" title="找回密码" center>
  <el-form
    :model="form"
    :rules="rules"
    ref="form"
    style=" margin: auto"
  >
    <el-form-item label="用户名" prop="workername">
      <el-input v-model="form.username" style="width: 400px"></el-input>
    </el-form-item>
    <el-form-item label="身份证号" prop="idcard">
      <el-input
        v-model="form.idcard"
        maxlength="18"
        style="width: 100%"
      ></el-input>
    </el-form-item>
    <el-form-item label="新的密码" prop="password">
      <el-input
        v-model="form.password"
        style="width: 400px"
        type="password"
        autocomplete="new-password"
      ></el-input>
    </el-form-item>
  </el-form>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="update()">确定修改</el-button>
      <el-button type="primary" @click="isChangePassword = false">
        取消
      </el-button>
    </span>
  </template>
</el-dialog>
    </div>


</template>

<script setup>
   import router from "../router"
const goto=(name)=>{
    router.push({name:name});
}
</script>

<script>
import axios from "axios"
import { getApi, postApi, deleteApi, updateApi } from "@/util/api";
import { ElMessage } from "element-plus";
export default {
    data() {
  return {
  worker:{
            workername:"",
            password:"",
        },
  isChangePassword: false,
  form: {
    username: "",
    idcard: "",
    password: "",
  },
  rules: {
    idcard: [
      { required: true, message: "请输入身份证号", trigger: "blur" },
      { min: 18, message: "身份证号长度不低于18位数", trigger: "blur" },
    ],
    password: [
      { required: true, message: "请输入新的密码", trigger: "blur" },
      { min: 6, message: "密码长度不低于6位数", trigger: "blur" },
    ],
  },
};
},



    methods:{
        login(){
            
            var param = "?username="+this.worker.workername;
            param += "&password="+this.worker.password;

            axios.post("workers/login",{
                username:this.worker.workername,
                password:this.worker.password
            }).then((res)=>{
                if(res.data.code == 1){
                    ElMessage.success("登录成功！");
                    window.sessionStorage.setItem("token",res.data.data);
                    this.$router.push({name:"workersfirst"}) 
                }
                else{ElMessage.error("账号或密码错误，请重新输入！")}
                console.log(res.data)
            }).catch(err=>{
                console.log(err);
            }).finally(()=>{
              this.worker = {}
            });
        },
//修改
update() {
  this.$refs['form'].validate((valid)=>{
    if(valid){
      updateApi("workers/resetpassword", {},this.form).then((res) => {
        if (res.data.code == 1) {
          ElMessage.success("修改成功");
          this.isChangePassword = false;
        }
        else if(res.data.code == 20004){
          ElMessage.warning("该跑腿员不存在，请检查输入的内容");
          this.isChangePassword = false;
        }
      }).finally(()=>{
          this.form={};
  });
    }
  })

    },
    },
};
</script>

<style lang="scss" scoped>
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  top: 10px;
  left: 15px;
  position: absolute;
}
    .Login{
        background:url("../assets/img/2.jpg");
        width:100%;
        height:100%;
        position:fixed;
        background-size:100% 100%;
    }
    .T{
      .admin{
        top: 10px;
        left: 20px;
        background-color: #fff;
        position: absolute;
      }
      h1{
        text-align: center;
      }
    }
    .A{
        border:1px solid #dccfcf;
  width: 350px;
  margin:180px auto;
  padding: 35px 80px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
  background-color:rgba(255,255,255,0.7);
  .e{
    font-size: 28px;
    padding-left: 20%;
}
.p{
    font-size: 28px;
    padding-left: 6px;
}
        .a{
            margin-top: 70px;
            margin-left: 20px;
            input{
                margin-left: 15px;
            }
        }
        .b{
            margin-top: 25px;
            margin-left: 20px;
            input{
                margin-left: 30px;
            }
        }
        .f{
            margin-top: 50px;
            display: flex;
            .c{
                margin-left: 20%;
                input{
                    background-color: #fff;
                    width: 80px;
                    height: 32px;
                }
            }
            .d{
                width: 80px;
                height: 32px;
                background-color: rgba(0,0,0,.5);
                span{
                    color: #fff;
                }
                margin-left: 20%;
            }
        }
        .floatR{
            margin-top: 40px;
            margin-left: 25%;
            font-size: 13px;
            color: rgb(0, 94, 255);
        } 
    }
    .ti{
        text-align: center;
    }
    
</style>